<template>
  <view class="suggestion flex-column">
    <view class="search-wrap flex">
      <wd-drop-menu>
        <wd-drop-menu-item
          v-model="type"
          :options="typeOptions"
          @change="getList"
        />

        <wd-drop-menu-item
          v-model="user"
          :options="userOptions"
          @change="getList"
        />
      </wd-drop-menu>

      <view class="search flex">
        <wd-input
          v-model="searchValue"
          clearable
          prefix-icon="search"
          @input="handleInput"
          @clear="getList"
        />
      </view>
    </view>

    <scroll-view scroll-y @scroll="handleScroll">
      <view
        class="item flex-column"
        v-for="item of suggestionList"
        :key="item.id"
        @click="toDetail(item.id)"
      >
        <view class="title flex">
          <view class="content">{{ item.content }}</view>
          <view class="status" :style="dynamicStyle(item)">{{
            item.statusText
          }}</view>
        </view>
        <view class="create-info flex">
          <view class="username">{{ item.name }}</view>
          <view class="create-time">{{ item.create_time }}</view>
        </view>
        <view class="see flex">
          <view class="icon flex">
            <wd-icon name="browse" size="20px"></wd-icon>
            <span class="num ml-6">{{ item.see }}</span>
          </view>
          <view class="show-detail flex">
            <span>查看详情</span>
            <wd-icon name="arrow-right" size="16px"></wd-icon>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="add" :style="addStyle" @click="goAddPage">
      <wd-icon name="add" size="22px"></wd-icon>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

import { getSuggestionList } from "../../../api/suggestion";
import tab from "../../../utils/tab";
import { formatTime, debounce } from "../../../utils/common";

// 功能建议
let statusObject = {
  0: "未读",
  1: "未采纳",
  2: "已采纳",
};

function dynamicStyle(item) {
  if (item.type === "2") {
    return item.status === 1
      ? {
          color: "#67c23a",
          backgroundColor: "rgb(239.8, 248.9, 235.3)",
          borderColor: "rgb(224.6, 242.8, 215.6)",
        }
      : {
          color: "#f56c6c",
          backgroundColor: "rgb(254, 240.3, 240.3)",
          borderColor: "rgb(253, 225.6, 225.6)",
        };
  } else {
    return item.status === 2
      ? {
          color: "#67c23a",
          backgroundColor: "rgb(239.8, 248.9, 235.3)",
          borderColor: "rgb(224.6, 242.8, 215.6)",
        }
      : item.status === 1
      ? {
          color: "#f56c6c",
          backgroundColor: "rgb(254, 240.3, 240.3)",
          borderColor: "rgb(253, 225.6, 225.6)",
        }
      : {
          color: "#e6a23c",
          backgroundColor: "rgb(250, 236.4, 216)",
          borderColor: "rgb(252.5, 245.7, 235.5)",
        };
  }
}
const searchValue = ref(undefined);
function getList() {
  let params = {
    open_id: user.value === "所有人" ? "" : uni.getStorageSync("openId"),
    type: type.value === 0 ? "" : type.value,
    content: searchValue.value,
  };
  getSuggestionList(params).then((res) => {
    if (res.code === 0) {
      res.data.forEach((item) => {
        item.create_time = formatTime(item.create_time);
        item.statusText =
          item.type === "1"
            ? statusObject[item.status]
            : item.status === 1
            ? "已解决"
            : "未解决";
      });
      suggestionList.value = res.data;
    }
  });
}

const handleInput = debounce(getList, 1000);

onShow(() => {
  console.log(1, "==");
  getList();
});

const type = ref(0);
const typeOptions = [
  {
    label: "全部",
    value: 0,
  },
  {
    label: "意见与建议",
    value: "1",
  },
  {
    label: "功能缺陷",
    value: "2",
  },
];

const user = ref("所有人");
const userOptions = [
  {
    label: "所有人",
    value: "所有人",
  },
  {
    label: "只看我的",
    value: "只看我的",
  },
];

const suggestionList = ref([]);

const addStyle = ref({});
const goAddPage = () => {
  tab.navigateTo("add");
};
const toDetail = (id) => {
  tab.navigateTo(`detail?id=${id}`);
};
function handleScroll(e) {
  if (e.detail.scrollTop < 5) {
    addStyle.value = {
      backgroundColor: "rgba(77, 128, 240, 1)",
    };
  } else {
    addStyle.value = {
      backgroundColor: "rgba(77, 128, 240, 0.5)",
    };
  }
}
</script>

<style scoped lang="scss">
.suggestion {
  background-color: #f7f7f7;
  color: #333;
  height: 100%;
  padding-bottom: 48rpx;
  box-sizing: border-box;
  letter-spacing: 0.5px;
  background-image: linear-gradient(to bottom, #faf9f9 0%, #e5e5e5 100%);
  position: relative;
  overflow: hidden;

  .search-wrap {
    height: 108rpx;
    width: 100%;
    background-color: #fff;
    align-items: center;
    padding: 16rpx 32rpx;
    box-sizing: border-box;

    :deep(.wd-drop-menu) {
      width: 50%;
      margin-right: 32rpx;
    }

    :deep(.wd-drop-menu__item) {
      text-align: left;
    }

    .search {
      flex: 1;
    }
  }

  scroll-view {
    height: calc(100% - 140rpx);
    padding: 0 4%;
    margin-top: 32rpx;
    box-sizing: border-box;

    .item {
      background-color: #fff;
      border-radius: 8px;
      padding: 32rpx;
      margin-top: 32rpx;

      .title {
        width: 100%;
        align-items: center;

        .content {
          font-size: 36rpx;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
        }

        .status {
          margin-left: 32rpx;
          font-size: 24rpx;
          background-color: transparent;
          border: 1px solid #f22;
          color: #f22;
          padding: 6rpx 16rpx;
          border-radius: 4px;
          width: 78rpx;
          text-align: center;
        }
      }

      .create-info {
        color: #9c9c9c;
        border-bottom: 1px solid #e1e1e1;
        justify-content: space-between;
        padding: 32rpx 0;
        font-size: 26rpx;
      }

      .see {
        justify-content: space-between;
        margin-top: 32rpx;
        color: #adacac;
        font-size: 28rpx;

        .icon {
          align-items: center;
        }

        .show-detail {
          align-items: center;
        }
      }
    }

    .item:first-child {
      margin-top: 0;
    }
  }

  .add {
    position: fixed;
    right: 64rpx;
    bottom: 128rpx;
    background-color: rgba(77, 128, 240, 1);
    border-radius: 50%;
    color: #fff;
    padding: 32rpx;
    box-shadow: 0 0 3px #333;
    z-index: 99;
    transition: all 0.5s;
  }
}
</style>
